<template>
     <div class="pic-pages">
      <div class="main " id="movie">
          <div class="wrap " id="wrap"></div>
      </div>
  </div>
</template>

<script>
import mock from '../mock';
  export default {
    data(){
      return {
        picData:[]
      }
    },
    mounted() {
      this.getHappyData()
    },
    methods: {
    // 图片数据
    getHappyData(){
       mock.getHappyData().then(res => {
        if(res.status===1){
          let data = res.data
          console.log(data,'6666')
          this.picData = data.list
          this.galary()
        }
      })
    },
      galary(){
        let that = this
          function g (selector){
            return selector.substring(0,1)==="." ? document.getElementsByClassName(selector.substring(1)) : document.getElementById(selector.substring(1));
        }
        var spanFlag =null;
        function random(range){
            var min = Math.min(range[0], range[1]);
            var max = Math.max(range[0], range[1]);
            var diff = max - min;
            var number = Math.round(Math.random() * diff) + min;
            return number;
        }
        //动态添加照片结构
        function addPhotos(){
            var _wrap = '';
            var _nav = '';
            for(var i=0;i< that.picData.length;i++){
                _wrap += '<div class="photo  photo_front"  id="photo_' + (i + 1) + '"><div class="photo-wrap"><div class="side side-front"><p class="image"><img src="' + that.picData[i].img + '"></p><p class="caption">' + that.picData[i].caption + '</p></div><div class="side side-back"><p class="desc">' + that.picData[i].desc + '</p></div></div></div></div>';
                _nav += '<span id="nav_' + (i + 1) + '" class="i"></span>';
            }
            //
            var navigation = '<div class="nav">' + _nav + '</div>'
            g('#wrap').innerHTML = _wrap + navigation;

            rsort(random([1, that.picData.length]));
        }
        addPhotos();
        function range(){
            /*{left: {x: [左侧区域 left 的最小值, 左侧区域 left 的最大值], y: [左侧区域 top 的最小值, 左侧区域 top 的最大值]},
            *right: {x: [右侧区域 left 的最小值, 右侧区域 left 的最大值], y: [右侧区域 top 的最小值, 右侧区域 top 的最大值]}}
            */
            var range = {
                left: {
                    x: [],
                    y: []
                },
                right: {
                    x: [],
                    y: []
                }
            };
            //获取最外围容器的宽度和高度
            var wrap = {
                width: g('#wrap').clientWidth,
                height: g('#wrap').clientHeight
            };
            //获取每一张海报的宽度和高度，因为海报的大小都是一样的，所以取第一张
            var photo = {
                width: g('.photo')[0].clientWidth,
                height: g('.photo')[0].clientHeight
            };
            //按照自己想要显示的区域进行计算，左右区域的高度 (top) 范围是一样的
            range.left.x = [0 - photo.width / 4 + 130, wrap.width / 2 - photo.width * 5 / 4 + 130];
            range.left.y = [0 - photo.height / 4 + 160, wrap.height - photo.height * 3 / 4 + 160];
            range.right.x = [wrap.width / 2 + photo.width / 4 + 130, wrap.width - photo.width / 4 + 130];
            range.right.y = range.left.y;

            return range;
        }
        var spans = document.getElementsByClassName("i");
        console.log(spans,'spans')
        for(var j=0;j<spans.length;j++){
            spans[j].onclick = function(){
                spanFlag = that.id.split("_")[1];
                //alert(spanFlag);
                turn(g("#photo_"+spanFlag));
            }
        }

        // 5.排序海报
        function rsort(n){
            var _photo = g('.photo');
            var photos = [];
            for(var i = 0; i < _photo.length; i++){
                _photo[i].className = 'photo photo_front';
                /*重排序之前去除所有图片样式*/
                _photo[i].style.left = '';
                _photo[i].style.top = '';

                _photo[i].style['transform'] = _photo[i].style['-webkit-transform'] = 'scale(2)';

                photos.push(_photo[i]);
                _photo[i].onclick =function(){
                    turn(this);
                };

            }

            var photo_center = g('#photo_' + n);
            photo_center.className += ' photo_center';

            photo_center = photos.splice(n-1, 1);//把photo_center从数组里删掉，splice() 方法会改变原始数组
            // 把剩下的海报分为左右两部分
            var photos_left = photos.splice(0, Math.ceil(photos.length / 2));
            var photos_right = photos;
            var ranges = range();
            // 对左右区域的海报位置进行随机赋值
            for(var j = 0; j < photos_left.length; j++){
                var photo = photos_left[j];
                photo.style.left = random(ranges.left.x) + 'px';
                photo.style.top = random(ranges.left.y) + 'px';
                photo.style['transform'] = photo.style['-webkit-transform'] = 'rotate(' + random([-150, 150]) + 'deg) scale(1)';
            }
            for(var s = 0; s < photos_right.length; s++){
                var photo = photos_right[s];
                photo.style.left = random(ranges.right.x) + 'px';
                photo.style.top = random(ranges.right.y) + 'px';
                photo.style['transform'] = photo.style['-webkit-transform'] = 'rotate(' + random([-150, 150]) + 'deg) scale(1)';
            }
            // 控制按钮处理
            var navs = g('.i');
            for(var k = 0; k < navs.length; k++){
                navs[k].className = 'i';
            }
            g('#nav_' + n).className += ' i_current';
        }
        /*1.翻面控制，每个元素的 onclick() 事件都绑定此函数，如果点击的元素不是中间的海报，则取得其
        * id 进行重新排序，使其在中间显示；如果点击的是中间的海报则让它翻面，同时控制按钮也要翻面
        */
        function turn(elem){
            var cls = elem.className;
            var n = elem.id.split('_')[1];//var n = elem.id.substr(-1, 1)，但是不推荐 substr;
            if(!/photo_center/.test(cls)){//判断当前点击的元素是不是 photo_center，不是的话不执行后面的翻转而进行海报排序
                return rsort(n);
            }
            if(/photo_front/.test(cls)){
                // cls = cls.replace(/photo_front/, 'photo_back');
                // g('#nav_' + n).className += ' i_back';//同时处理控制按钮
            } else{
                cls = cls.replace(/photo_back/, 'photo_front');
                g('#nav_' + n).className = g('#nav_' + n).className.replace(/\s*i_back\s*/, ' ');//同时处理控制按钮
            }
            elem.className = cls;
        }
      }
    },
  }
</script>

<style lang="less">

.main {
  width: 100%;
  height: 100%;
}

.wrap{
  width: 100%;
  height: 100%;
  /*position: absolute;*/
  /*top: 50%;*/
  /*background-color: #a6e1ec;*/
  /*background: linear-gradient(#272727, #222222);*/
  opacity: 0.9;
  overflow: hidden;
  perspective: 800px;
  -webkit-perspective: 800px;
}
.photo{
  position: absolute;
  width: 260px;
  height: 320px;
  z-index: 1;
  box-shadow: 0 0 1px rgba(0, 0, 0, .01);
  transition: all .5s;
  -moz-transition: all .5s; /* Firefox 4 */
  -webkit-transition: all .5s; /* Safari 和 Chrome */
  -o-transition: all .5s; /* Opera */
  left: 50%;
  top: 50%;
  margin: -160px 0 0 -130px;
}
.photo .photo-wrap .side{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #eee;
  top: 0;
  right: 0;
  padding: 20px;
  box-sizing: border-box;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;    /* Chrome 和 Safari */
  -moz-backface-visibility:hidden;     /* Firefox */
  -ms-backface-visibility:hidden;     /* Internet Explorer */
}
#movie{

}

.photo .photo-wrap .side-front{

  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
}

.photo .photo-wrap .side-front .image{
  width: 100%;
  height: 250px;
  line-height: 250px;
  overflow: hidden;
}
.photo .photo-wrap .side-front .image img{
  width: 100%;
  vertical-align: middle;/*使高度不够的图片居中显示*/
}
.photo .photo-wrap .side-front .caption{
  text-align: center;
  font-size: 16px;
  line-height: 50px;
}
/* 初始化时使 side-back 沿Y轴旋转180度，即在背面显示 */
.photo .photo-wrap .side-back{
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}
.photo .photo-wrap .side-back .desc{
  color: #666;
  font-size: 14px;
  line-height: 1.5em;
}
/*当前选中的海报样式*/
.photo_center{
  top: 50%;
  left: 50%;
  margin: -160px 0 0 -130px;
  z-index: 2;
}
/*负责翻转*/
.photo .photo-wrap{
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  transition: all .6s ease-in-out;
  -webkit-transition: all .6s ease-in-out;/* Safari 和 Chrome */
  -moz-transition: all .5s; /* Firefox 4 */
  -o-transition: all .5s; /* Opera */

  transform-origin: 0% 50% 0px;
  -ms-transform-origin: 0% 50% 0px;/* IE 9 */
  -o-transform-origin: 0% 50% 0px;/* Opera */
  -webkit-transform-origin: 0% 50% 0px;/* Safari 和 Chrome */
  -moz-transform-origin: 0% 50% 0px;/* Firefox */
}
.photo_front .photo-wrap{/* .photo_front 是添加到 div.photo 的类 */
  transform: translate(0px, 0px) rotateY(0deg);
  -webkit-transform: translate(0px, 0px) rotateY(0deg);
  -moz-transform: translate(0px, 0px) rotateY(0deg);
  -o-transform: translate(0px, 0px) rotateY(0deg);
  -ms-transform: translate(0px, 0px) rotateY(0deg);
}
.photo_back .photo-wrap{/* .photo_back 是添加到 div.photo 的类*/
  transform: translate(260px, 0px) rotateY(180deg);
  -webkit-transform: translate(260px, 0px) rotateY(180deg);
  -moz-transform: translate(260px, 0px) rotateY(180deg);
  -o-transform: translate(260px, 0px) rotateY(180deg);
  -ms-transform: translate(260px, 0px) rotateY(180deg);
}


/* 添加控制按钮的样式 */
@font-face{
  font-family: 'icomoon';
  /*src: url('img/icomoon.woff') format('woff');*/
  font-weight: normal;
}
.nav{
  position: absolute;
  width: 80%;
  left: 10%;
  height: 30px;
  line-height: 30px;
  bottom: 20px;
  z-index: 3;
  text-align: center;
}
/* 普通样式 */
.nav .i{
  display: inline-block;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background-color: #aaa;
  text-align: center;
  border-radius: 50px;
  transform: scale(.5);
  -webkit-transform: scale(.5);
  -moz-transform: scale(.5);
  -o-transform: scale(.5);
  -ms-transform: scale(.5);

  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
}
/* 设置并显示字体图标 */
.nav .i:after{
  content: '\e965';
  font-family: 'icomoon';
  font-size: 80%;
  display: inline-block;
  line-height: 30px;
  text-align: center;
  color: #fff;
  opacity: 0;
}
/* 选中样式 */
.nav .i_current{
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
}
.nav .i_current:after{
  opacity: 1;
}
/* 背面样式 */
.nav .i_back{
  background-color: #555;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}


/*23部分 end*/
.pic-pages{
  width: 100%;
  height: 100vh;
}


</style>